<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建表格测试</title>
		<style>
			table, td {
				background-color: lightgray;
				margin: 10px auto;
				border: 1px solid #000;
				border-collapse: collapse;
			}
			
			table td {
				text-align: center;
				padding: 3px 8px;
				/* border-collapse: collapse; */
			}
		</style>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			$(function(){
				// var table = $("<table></table>");
				// var tr = $("<tr></tr>");
				// var td = $("<td>单行单列</td>");
				// tr.append(td);
				// table.append(tr);
				// var div1 = $("#div1");
				// div1.append(table)
			})
			
			function createTable(rows, cols) {
				if (rows <= 0 || cols <= 0) {
					alert("数据错误：行或列要大于零");
				}
				
				var table = $("<table></table>");
				for (var i = 0; i < rows; i++) {
					var tr = $("<tr></tr>");
					for (var j = 0; j < cols; j++) {
						var cell = (i + 1) + " + " + (j + 1) + " = " + (i + j + 2);
						var td = $("<td>" + cell + "</td>");
						tr.append(td);
					}
					table.append(tr);
				}
				$("body").append(table);
			}
		</script>
	</head>
	<body>
		<h1>创建表格</h1>
		<div id="div1">
			<input type="button" value="创建单行单列表格" onclick="createTable(1, 1)" />
		</div>
		<div id="div2">
			<input type="button" value="创建4行5列的表格" onclick="createTable(4, 5)" />
		</div>
	</body>
</html>
